<template>
    <div id="root">
    <Top><p>修改用户名</p></Top>
        <van-cell-group>
            <van-field v-model="username" @input="jiao" placeholder="请输入用户名" />
        </van-cell-group>
        <p class="one-p" :class="{aa:aa1}">用户名只能修改一次（5-24字符之间）</p>
        <van-button type="info" block @click="common">提交</van-button>
    </div>
</template>

<script>
    import Top from "./Top";
    export default {
        name: "Username",
        components: {Top},
        data() {
            return {
                username:'',
                aa1:false,
            }
        },
        methods: {
            common() {
                console.log(this.username.length)
                    this.aa1=true;
                   let name=JSON.parse(localStorage.user);
                   name.username=this.username;
                  localStorage.user=JSON.stringify(name);
                    this.$router.go(-1);
            },
            jiao(){
                this.aa1=false;
            }
        },
    }
</script>

<style scoped>
#root{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: #f5f5f5;
    /*z-index: 999;*/
}
    .one-p{
        width: 100%;
        font-size: .4rem;
        color: #666;
        padding: .4rem 0 1rem;
    }
    .aa{
        color: red;
    }
</style>